<!--
 * @Descripttion: 关爱人员
 * @version:
 * @Author: wl
 * @Date: 2020-05-21 17:00:50
 * @LastEditors: wl
 * @LastEditTime: 2020-08-06 17:44:09
-->
<template>
  <div>
    <page :asideShow="asideShow">
      <div slot="toolbar">
        <el-form
          :inline="true"
          :model="filters"
          label-width="90px"
          label-position="right"
        >
          <el-form-item label="标记类型：">
            <el-select
              filterable
              v-model="filters.sign"
              multiple
              collapse-tags
              placeholder="请选择"
              clearable
              @change="handleQuery"
            >
              <el-option
                v-for="item in dictData.sys_person_sign"
                :key="item.DID"
                :label="item.name"
                :value="item.DID"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="姓名：">
            <el-input
              class="normal"
              placeholder="请输入"
              clearable
              v-model="filters.name"
              @keydown.enter.native="handleQuery"
            ></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div slot="btnSearch">
        <el-button @click="handleQuery('a')">查询</el-button>
      </div>
      <div slot="content">
        <el-table
        :header-cell-style="{ background: '#e7eaf0', color: '#606266' }"
          v-loading="loading"
          element-loading-text="加载中..."
          :data="careList"
          style="width: 100%; margin-bottom: 20px"
        >
          <el-table-column
            label="头像"
            prop="photo"
            header-align="center"
            align="center"
          >
            <template slot-scope="scope">
              <img
                :src="getItemPhoto(scope.row.photo)"
                alt
                style="width: 50px; height: 50px"
                v-image-preview
              />
            </template>
          </el-table-column>
          <el-table-column
            prop="name"
            header-align="center"
            align="center"
            label="姓名"
          ></el-table-column>
          <el-table-column
            prop="gender"
            label="性别"
            align="center"
            width="100"
          >
            <template slot-scope="scope">
              <span v-if="scope.row.gender == 1">女</span>
              <span v-else>男</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="phone"
            label="手机号码"
            width="180"
            header-align="center"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="idCardS"
            label="身份证"
            width="180"
            header-align="center"
            align="center"
          >
            <template slot-scope="scope">
              <div>
                {{
                  scope.row.idCard.substr(0, 3) +
                  "***" +
                  scope.row.idCard.substr(-3, 3)
                }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="type" label="人员类型" align="center">
            <template slot-scope="scope">
              <span>
                {{
                  dictData.sys_person_type.find((items) => {
                    return items.DID === scope.row.type;
                  }).name
                }}
              </span>
            </template>
          </el-table-column>
          <el-table-column
            prop="address"
            label="人员地址"
            align="center"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              <span>{{ scope.row.address ? scope.row.address : "—" }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="updateTime" label="标记类型" align="center">
            <template slot-scope="scope">
              <span v-for="doc in scope.row.sign" :key="doc">
                {{
                  dictData.sys_person_sign.find((items) => {
                    return items.DID === doc;
                  }).name
                }}
              </span>
            </template>
          </el-table-column>
          <el-table-column
            fixed="right"
            header-align="center"
            align="center"
            width="210"
            :label="$t('action.operation')"
          >
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="success"
                @click="signSubmit(scope.row)"
                :disabled="!hasPerm('personnel:carefor:sign')"
                >重新标记</el-button
              >
              <el-button
                :disabled="!hasPerm('personnel:carefor:cancel')"
                size="mini"
                type="warning"
                @click="clearSign(scope.row)"
                >取消</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div slot="footer">
        <el-pagination
          layout="total, prev, pager, next, jumper"
          @current-change="refreshPageRequest"
          :current-page="pageRequest.page"
          :page-size="pageRequest.pageSize"
          :total="totalSize"
          style="float: right"
        ></el-pagination>
      </div>
    </page>
    <!-- 标记 -->

    <el-dialog
      title="人员标记详情"
      width="28%"
      :visible.sync="dialogmarkVisible"
    >
      <el-checkbox
        v-for="item in newSignList"
        :key="item._id"
        :value="item.label"
        label="true"
        :checked="item.label"
        border
        @change="checkboxChange(item.DID)"
        >{{ item.name }}</el-checkbox>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleCancel">取 消</el-button>
        <el-button type="primary" @click="handleSign">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      asideShow: false,
      filters: {
        sign: [],
      },
      pageRequest: {
        page: 1,
        pageSize: 10,
      },
      loading: false,
      totalSize: 0,
      // 关爱人员列表
      careList: [],

      dictData: {},
      dialogmarkVisible: false,
      newSignList: [],
      _id: "",
    };
  },
  methods: {
    // 获取人员类型

    // 获取列表数据
    handleQuery(val) {
      this.loading = true;
      let sign = this.filters.sign;
      if (this.filters.sign.length == 0) {
        sign = Array.from(this.dictData.sys_person_sign, (i) => {
          return i.DID;
        });
      }
      let params = {
        name: this.filters.name,
        sign: sign,
        page: val ? "" : this.pageRequest.page,
        limit: val ? "" : this.pageRequest.limit,
        auditStatus: 1,
      };
      this.$api.personnel.queryList(params).then((res) => {
        if (res.code == 0) {
          this.loading = false;
          this.careList = res.data;
          this.totalSize = res.count;
        }
      });
    },

    // 新增
    handleExport() {},
    // 编辑
    handeEdit() {},
    // 删除
    handeDetele() {},
    // 分页
    refreshPageRequest(page) {
      this.pageRequest.page = page;
      this.handleQuery();
    },

    //图片处理
    getBase64(file) {
      return new Promise(function (resolve, reject) {
        let reader = new FileReader();
        let imgResult = "";
        reader.readAsDataURL(file);
        reader.onload = function () {
          imgResult = reader.result;
        };
        reader.onerror = function (error) {
          reject(error);
        };
        reader.onloadend = function () {
          resolve(imgResult);
        };
      });
    },
    // 上传图片
    async upLoad(param) {
      var imgup = "";
      await this.getBase64(param.file).then((res) => {
        imgup = res;
      });
      var paramd = {
        img: imgup,
      };
      this.$api.imgAdd
        .addimgPer(paramd)
        .then((res) => {
          this.imgURL = res.data;
          this.form.photo = res.id;
        })
        .catch((err) => {
          console.log("上传失败", err);
        });
    },
    // 拼接图片
    getItemPhoto(id) {
      var url = this.global.baseUrlImage + "avatar/" + id;
      return url;
    },
    // 标记
    signSubmit(row) {
      this.dialogmarkVisible = true;
      this.getSignList(row.sign);
      this._id = row._id;
    },
    //标记时回显复选
    getSignList(sign) {
      this.newSignList = [];
      this.dictData.sys_person_sign.map((item) => {
        let newItem = {
          DID: item.DID,
          label: false,
          name: item.name,
        };
        this.newSignList.push(newItem);
      });
      if (sign && sign.length > 0) {
        sign.map((item) => {
          this.newSignList.map((item1) => {
            if (item == item1.DID) {
              this.$set(item1, "label", true);
            }
          });
        });
      }
    },
    // 提交标记
    handleSign() {
      var list = [];
      this.newSignList.map((item) => {
        if (item.label == true) {
          list.push(item.DID);
        }
      });
      let params = {
        _id: this._id,
        sign: list,
      };
      let paramJson = JSON.stringify(params);
      this.$api.personnel.signData(paramJson).then((res) => {
        if (res.code == 0) {
          this.$message.success("标记成功");
          this.dialogmarkVisible = false;
          this.handleQuery();
        }
      });
    },
    //清空标记
    clearSign(row) {
      this.$confirm("清空该人员标记, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this._id = row._id;
          this.newSignList = [];
          this.handleSign();
        })
        .catch(() => {});
    },
    checkboxChange(id) {
      this.newSignList.map((item) => {
        if (item.DID == id) {
          item.label = !item.label;
        }
      });
    },
    // 取消标记
    handleCancel() {
      this.dialogmarkVisible = false;
    },
  },
  mounted() {
    this.dictData = JSON.parse(sessionStorage.getItem("dictData"));
    this.handleQuery();
  },
};
</script>

<style>
</style>
